<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="box">
        <!-- 使用组件navbar -->
        <navbar :msg='pMsg' @childevent='getData'></navbar>
    </div>
    <script>
        // 注册组件navbar
        Vue.component("navbar", {
            //template：定义组件模板
            template: `
                <div style="background-color: #cccccc;">
                    <span @click="main()">{{ msg }}</span>|
                    <span>home</span>|
                    <span>aboult</span>
                </div>
            `,
            data() {
                return {
                    childMsg: '这是子组件传给父组件的值'
                }
            },
            props: ['msg'],
            methods: {
                main() {
                    this.$emit('childevent', {
                        childMsg: this.childMsg,
                        aaa: 111
                    })
                }
            }
        })
        var vm = new Vue({
            el: "#box",
            data: {
                pMsg: '父组件传递的状态'
            },
            methods: {
                getData(data) {
                    console.log(data)
                }
            }
        })
    </script>
</body>

</html>